Component({
  properties: {
    canvasId: {
      type: String,
      value: 'simpleChart'
    },
    chartData: {
      type: Array,
      value: [],
      observer: function(newVal, oldVal) {
        if (newVal && newVal.length > 0) {
          this.setData({
            chartData: newVal
          }, () => {
            // 确保组件已挂载并且有数据后再绘制图表
            if (this.data.canvasWidth > 0 && this.data.canvasHeight > 0) {
              this.drawChart();
            }
          });
        }
      }
    },
    xLabels: {
      type: Array,
      value: []
    },
    targetLine: {
      type: Number,
      value: 0
    },
    targetLineColor: {
      type: String,
      value: '#4CAF50'
    },
    showValuesOnTop: {
      type: Boolean,
      value: false
    },
    simplifiedLabels: {
      type: Boolean,
      value: false
    },
    labelMode: {
      type: String,
      value: 'default' // 可选值: 'default', 'dateOnly', 'custom'
    }
  },

  data: {
    canvasWidth: 300,
    canvasHeight: 200
  },

  lifetimes: {
    attached: function() {
      // 获取组件尺寸
      const query = wx.createSelectorQuery().in(this);
      query.select('.chart-canvas')
        .boundingClientRect(rect => {
          if (rect) {
            this.setData({
              canvasWidth: rect.width,
              canvasHeight: rect.height
            }, () => {
              if (this.properties.chartData && this.properties.chartData.length > 0) {
                this.drawChart();
              }
            });
          }
        })
        .exec();
    },
    
    ready: function() {
      // 组件完全准备好后，确保图表已绘制
      if (this.properties.chartData && this.properties.chartData.length > 0 && 
          this.data.canvasWidth > 0 && this.data.canvasHeight > 0) {
        this.drawChart();
      }
    }
  },

  methods: {
    drawChart: function() {
      const ctx = wx.createCanvasContext(this.properties.canvasId, this);
      const { chartData, xLabels, targetLine, targetLineColor, showValuesOnTop } = this.properties;
      const { canvasWidth, canvasHeight } = this.data;
      
      console.log('绘制图表:', chartData);
      
      // 清空画布
      ctx.clearRect(0, 0, canvasWidth, canvasHeight);
      
      // 增强数据验证，确保chartData是有效的数组
      if (!chartData || !Array.isArray(chartData) || chartData.length === 0) {
        ctx.setFontSize(14);
        ctx.setFillStyle('#999999');
        ctx.fillText('暂无数据', canvasWidth / 2 - 30, canvasHeight / 2);
        ctx.draw();
        return;
      }
      
      // 检查是否所有的chartData元素都是null
      let hasValidSeries = false;
      for (let i = 0; i < chartData.length; i++) {
        if (chartData[i] && chartData[i].data && chartData[i].data.length > 0) {
          hasValidSeries = true;
          break;
        }
      }
      
      if (!hasValidSeries) {
        ctx.setFontSize(14);
        ctx.setFillStyle('#999999');
        ctx.fillText('暂无有效数据', canvasWidth / 2 - 40, canvasHeight / 2);
        ctx.draw();
        return;
      }
      
      // 设置内边距
      const padding = {
        top: 30,
        right: 20,
        bottom: 30,
        left: 30
      };
      
      // 计算图表区域大小
      const chartWidth = canvasWidth - padding.left - padding.right;
      const chartHeight = canvasHeight - padding.top - padding.bottom;
      
      // 找出所有系列的数据点，过滤null和非数字值
      let allDataPoints = [];
      chartData.forEach(series => {
        if (series && series.data && Array.isArray(series.data)) {
          const validPoints = series.data.filter(point => {
            // 处理两种可能的数据格式
            if (point !== null && typeof point === 'object' && 'value' in point) {
              return point.value !== null && !isNaN(Number(point.value));
            }
            return point !== null && !isNaN(Number(point));
          }).map(point => {
            // 转换为数值
            if (point !== null && typeof point === 'object' && 'value' in point) {
              return Number(point.value);
            }
            return Number(point);
          });
          
          allDataPoints = allDataPoints.concat(validPoints);
        }
      });
      
      // 如果没有有效数据点，显示空状态
      if (allDataPoints.length === 0) {
        ctx.setFontSize(14);
        ctx.setFillStyle('#999999');
        ctx.fillText('暂无有效数据', canvasWidth / 2 - 40, canvasHeight / 2);
        ctx.draw();
        return;
      }
      
      // 获取数据最大值
      let maxValue = Math.max(...allDataPoints, targetLine > 0 ? targetLine : 0);
      maxValue = Math.max(Math.ceil(maxValue * 1.2), 10);
      
      // 获取最小值，确保图表有足够的显示范围
      let minValue = Math.min(...allDataPoints);
      minValue = Math.max(0, Math.floor(minValue * 0.8)); // 至少为0
      
      // 绘制Y轴刻度线和标签
      ctx.setLineWidth(1);
      ctx.setStrokeStyle('#EEEEEE');
      ctx.setFontSize(10);
      ctx.setFillStyle('#999999');
      
      const yAxisSteps = 5;
      for (let i = 0; i <= yAxisSteps; i++) {
        const y = padding.top + (chartHeight / yAxisSteps) * i;
        const value = maxValue - ((maxValue - minValue) / yAxisSteps) * i;
        
        // 绘制水平辅助线
        ctx.beginPath();
        ctx.moveTo(padding.left, y);
        ctx.lineTo(canvasWidth - padding.right, y);
        ctx.stroke();
        
        // 绘制Y轴标签
        ctx.fillText(Math.round(value), 5, y + 3);
      }
      
      // 获取第一个系列的数据长度来确定X轴点数
      const xPointCount = chartData[0] && chartData[0].data ? chartData[0].data.length : 0;
      
      // 计算X轴步长 - 调整为数据点较少时更紧凑的布局
      let xStep;
      // 创建新的padding对象，用于绘制数据点
      let pointsPadding = { ...padding };
      
      // 当数据点少于4个时，使用更紧凑的布局
      if (xPointCount <= 3) {
        // 计算更紧凑的步长，确保图表不会太分散
        // 使用图表宽度的一半来分布点，而不是整个宽度
        const usableWidth = chartWidth * 0.6; // 使用60%的图表宽度
        const leftPadding = (chartWidth - usableWidth) / 2; // 左右均匀留白
        
        if (xPointCount === 1) {
          // 只有一个点，居中显示
          xStep = 0;
          // 调整开始位置到中间
          pointsPadding.left = padding.left + chartWidth / 2;
        } else {
          // 2-3个点，在中间区域均匀分布
          xStep = usableWidth / (xPointCount - 1);
          // 调整X轴起始位置，使点集中在中间
          pointsPadding.left = padding.left + leftPadding;
        }
      } else {
        // 4个及以上点，使用常规布局
        xStep = chartWidth / (xPointCount > 1 ? xPointCount - 1 : 1);
        // 确保pointsPadding与原始padding一致
        pointsPadding = { ...padding };
      }
      
      // 绘制X轴标签
      // 智能计算应该显示多少个标签，以避免重叠
      // 假设每个标签至少需要60px宽度才不会重叠
      const minSpaceBetweenLabels = 60; 
      const maxLabelsCanFit = Math.floor(chartWidth / minSpaceBetweenLabels);
      
      // 计算应该每隔多少个点显示一个标签
      let showEveryNthLabel = 1;
      if (xPointCount > maxLabelsCanFit) {
        showEveryNthLabel = Math.ceil(xPointCount / maxLabelsCanFit);
      }
      
      // 始终显示第一个和最后一个，其余按照计算出的间隔显示
      const importantIndices = [0, xPointCount - 1]; // 始终显示的索引
      
      for (let i = 0; i < xPointCount; i++) {
        const x = pointsPadding.left + i * xStep;
        
        // 当数据点较少时，优化虚线的显示
        if (xPointCount <= 3) {
          // 绘制垂直辅助线在每个数据点位置
          ctx.beginPath();
          ctx.setStrokeStyle('#F5F5F5');
          ctx.moveTo(x, padding.top);
          ctx.lineTo(x, padding.top + chartHeight);
          ctx.stroke();
        } else {
          // 常规网格线
          ctx.beginPath();
          ctx.setStrokeStyle('#F5F5F5');
          ctx.moveTo(x, padding.top);
          ctx.lineTo(x, padding.top + chartHeight);
          ctx.stroke();
        }
        
        // 智能判断是否应该显示此标签
        const shouldShowLabel = importantIndices.includes(i) || (i % showEveryNthLabel === 0);
        
        if (shouldShowLabel) {
          ctx.setFontSize(10);
          ctx.setFillStyle('#666666');
          ctx.setTextAlign('center');
          let label = xLabels && xLabels[i] ? xLabels[i] : i.toString();
          
          // 根据标签模式处理显示内容
          if (this.properties.simplifiedLabels || this.properties.labelMode !== 'default') {
            if (this.properties.labelMode === 'dateOnly') {
              // 仅显示日期部分，假设格式为"XX日 XX:XX"
              if (label.includes('日')) {
                label = label.split(' ')[0]; // 只保留"XX日"部分
              }
            } else if (this.properties.simplifiedLabels) {
              // 简化标签，移除时间部分
              if (label.includes('日') && label.includes(':')) {
                label = label.split(' ')[0]; // 只保留日期部分
              }
            }
          }
          
          ctx.fillText(label, x, canvasHeight - 5);
        }
      }
      
      // 为最小和最大值绘制辅助水平线
      const drawHorizontalLine = (value, color = '#f0f0f0') => {
        const yRatio = chartHeight / (maxValue - minValue);
        const y = padding.top + chartHeight - (value - minValue) * yRatio;
        
        ctx.beginPath();
        ctx.setStrokeStyle(color);
        ctx.setLineWidth(1);
        ctx.moveTo(padding.left, y);
        ctx.lineTo(canvasWidth - padding.right, y);
        ctx.stroke();
      };
      
      // 绘制基准线 (0%)
      if (minValue <= 0 && maxValue >= 0) {
        drawHorizontalLine(0, '#dddddd');
      }
      
      // 绘制各数据系列
      chartData.forEach((series, seriesIndex) => {
        // 检查series是否为null或undefined
        if (!series) return;
        if (!series.data || !Array.isArray(series.data)) return;
        
        const color = series.color || this.getDefaultColor(seriesIndex);
        // 传递修改后的pointsPadding
        this.drawDataSeries(ctx, series.data, color, xPointCount, pointsPadding, xStep, chartHeight, minValue, maxValue - minValue, series.name, showValuesOnTop);
      });
      
      // 绘制图例
      this.drawLegend(ctx, chartData, padding);
      
      // 绘制目标线
      if (targetLine > 0) {
        const yRatio = chartHeight / (maxValue - minValue);
        const targetY = padding.top + chartHeight - (targetLine - minValue) * yRatio;
        
        ctx.beginPath();
        ctx.setLineDash([5, 5]);
        ctx.setLineWidth(1);
        ctx.setStrokeStyle(targetLineColor);
        ctx.moveTo(padding.left, targetY);
        ctx.lineTo(canvasWidth - padding.right, targetY);
        ctx.stroke();
        ctx.setLineDash([]);
        
        // 绘制目标线标签
        ctx.setTextAlign('right');
        ctx.setFontSize(10);
        ctx.setFillStyle(targetLineColor);
        ctx.fillText(`目标: ${targetLine}`, canvasWidth - padding.right, targetY - 5);
      }
      
      // 绘制到画布
      ctx.draw(false, () => {
        console.log('图表绘制完成');
      });
    },
    
    // 绘制数据系列
    drawDataSeries(ctx, dataArray, color, pointCount, padding, xStep, chartHeight, minValue, valueRange, seriesName, showValuesOnTop) {
      // 绘制折线
      ctx.beginPath();
      ctx.setStrokeStyle(color);
      ctx.setLineWidth(2);
      
      let isFirstPoint = true;
      const points = [];
      
      for (let i = 0; i < dataArray.length; i++) {
        let dataPoint = dataArray[i];
        let value, pointColor;
        
        // 处理两种可能的数据格式：单值或带颜色的对象
        if (dataPoint !== null && typeof dataPoint === 'object' && 'value' in dataPoint) {
          // 数据格式是 { value: number, color: string }
          value = dataPoint.value;
          pointColor = dataPoint.color || color;
        } else {
          // 数据格式是直接值
          value = dataPoint;
          pointColor = color;
        }
        
        if (value === null || isNaN(Number(value))) continue;
        
        const x = padding.left + i * xStep;
        const yRatio = chartHeight / valueRange;
        const y = padding.top + chartHeight - (Number(value) - minValue) * yRatio;
        
        points.push({ x, y, value: Number(value), color: pointColor });
        
        if (isFirstPoint) {
          ctx.moveTo(x, y);
          isFirstPoint = false;
        } else {
          ctx.lineTo(x, y);
        }
      }
      
      ctx.stroke();
      
      // 绘制数据点
      for (const point of points) {
        ctx.beginPath();
        ctx.setFillStyle(point.color);
        ctx.arc(point.x, point.y, 3, 0, 2 * Math.PI);
        ctx.fill();
        
        // 如果需要显示数值，在点上方显示
        if (showValuesOnTop) {
          ctx.setTextAlign('center');
          ctx.setFontSize(10);
          ctx.setFillStyle('#333333');
          ctx.fillText(point.value.toString(), point.x, point.y - 10);
        }
      }
    },
    
    // 绘制图例
    drawLegend(ctx, chartData, padding) {
      if (!chartData || chartData.length === 0) return;
      
      const legendY = 15;
      let currentX = padding.left;
      
      chartData.forEach((series, index) => {
        if (!series.name) return;
        
        const color = series.color || this.getDefaultColor(index);
        
        // 绘制图例点
        ctx.beginPath();
        ctx.setFillStyle(color);
        ctx.arc(currentX, legendY, 4, 0, 2 * Math.PI);
        ctx.fill();
        
        // 绘制图例文字
        ctx.setTextAlign('left');
        ctx.setFontSize(10);
        ctx.setFillStyle('#333333');
        ctx.fillText(series.name, currentX + 8, legendY + 3);
        
        // 更新下一个图例的位置
        currentX += ctx.measureText(series.name).width + 30;
      });
    },
    
    // 获取默认颜色
    getDefaultColor(index) {
      const colors = ['#4CAF50', '#ff9f43', '#1890ff', '#722ed1', '#eb2f96'];
      return colors[index % colors.length];
    },
    
    // 绘制圆角矩形
    drawRoundedRect: function(ctx, x, y, width, height, radius, fillColor) {
      if (height < radius * 2) radius = height / 2;
      
      ctx.beginPath();
      ctx.moveTo(x + radius, y);
      ctx.lineTo(x + width - radius, y);
      ctx.arc(x + width - radius, y + radius, radius, Math.PI * 1.5, 0, false);
      ctx.lineTo(x + width, y + height - radius);
      ctx.arc(x + width - radius, y + height - radius, radius, 0, Math.PI * 0.5, false);
      ctx.lineTo(x + radius, y + height);
      ctx.arc(x + radius, y + height - radius, radius, Math.PI * 0.5, Math.PI, false);
      ctx.lineTo(x, y + radius);
      ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 1.5, false);
      ctx.closePath();
      
      ctx.setFillStyle(fillColor);
      ctx.fill();
    }
  }
});